<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>首页界面</title>
  <link rel="stylesheet" href="css/base.css" />
</head>
<style>label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: 0.9rem;
  padding: 2px 5px;
}
</style>
<body>
  <!-- <div id="show">1</div> -->
  <!--顶部-->
  <header class="header left">
    <div class="left nav">
      <ul>
        <li class="nav_active">
          <i class="nav_1"></i><a href="index.html">空气质量分析</a>
        </li>
        <li><i class="nav_2"></i><a href="yuce.html">AQI预测</a></li>
        <li><i class="nav_3"></i><a href="evaluate.html">评价与反馈</a></li>
      </ul>
    </div>
    <div class="header_center left">
      <h2><strong>全国空气质量数据分析和可视化</strong></h2>
      <p class="color_font">
        <small>National Air Quality Data Analysis and Visualization</small>
      </p>
    </div>
    <div class="showTime"></div>

    </div>
    <script>var t = null;
      t = setTimeout(time, 1000);   //开始运行
      function time() {
        clearTimeout(t); //清楚计时器
        dt = new Date()
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日 ' + h + '时' + m + '分' + s + '秒'
      }
    </script>
  </header>
  <!--内容部分-->
  <div class="con left">
    <div class="con_div">
      <a class="con_div_text left active" href="index.html">
        <img src="img/烟花爆竹.png" class="left text01_img" />
        <div class="left text01_div">
          <p>春节期间是否可以燃放烟花爆竹？</p>
          <p>不建议燃放</p>
        </div>
      </a>
      <a class="con_div_text left" href="car.html">
        <img src="img/汽车.png" class="left text01_img" />
        <div class="left text01_div">
          <p>是否建议增加使用新能源汽车？</p>
          <p>建议增加</p>

        </div>
      </a>
      <a class="con_div_text left" href="weather.html">
        <img src="img/雾霾.png" class="left text01_img" />
        <div class="left text01_div">
          <p>随着政策改革雾霾天气情况是否变好？</p>
          <p>明显变佳</p>
        </div>
      </a>
    </div>

    <!--统计分析图-->
    <div class="div_any">
      <div class="left div_any01">
        <div class="div_any_child">
          <div class="div_any_title">
        
          <img src="img/title_2.png" />AQI污染程度变化趋势
        </div>
        <p id="char6" class="p_chart"></p>
        </div>
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_2.png" />城市空气质量排行榜
          </div>
          <div class="table_p" id="best">
            <div>
              <button onclick="showTable('best')">最佳<botton>
                  <button onclick="showTable('worst')">最差<botton>
            </div>
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>城市</th>
                  <th>AQI</th>
                  <th>空气质量等级</th>
                </tr>
              </thead>
              <tbody id="best-tbody"></tbody>
            </table>
          </div>
          <div class="table_p" id="worst">
            <div>
              <button onclick="showTable('best')">最佳<botton>
                  <button onclick="showTable('worst')">最差<botton>
            </div>
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>城市</th>
                  <th>AQI</th>
                  <th>空气质量等级</th>
                </tr>
              </thead>
              <tbody id="worst-tbody"></tbody>
            </table>
          </div>
        </div>
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_1.png" />AQI污染程度占比
          </div>
          <p id="char1" class="p_chart1"></p>
        </div>
      </div>
      <div class="div_any02 left">
        <div class="div_any_child div_height">
          <div class="div_any_title any_title_width">
            <img src="img/title_3.png" />政策前后污染程度分布
          </div>
          <!-- map -->
          <div id="map_div">
            <!-- <div>
              <button id="2014">2014年</button>
              <button id="2023">2023年</button>
          </div> -->
          
        </div>
        </div>
      </div>
      <div class="right div_any01">
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_4.png" />烟花爆竹的pm2.5分析
          </div>
          <select name="pets" id="pet-select" class="city" style="z-index: 1999;width: 60px;">
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="石家庄">石家庄</option>
            <option value="三亚">三亚</option>
            <option value="重庆">重庆</option>
            <option value="成都">成都</option>
            <option value="上海">上海</option>
            <option value="武汉">武汉</option>
            <option value="郑州">郑州</option>
            <option value="南京">南京</option>
            <option value="杭州">杭州</option>
            <option value="沈阳">沈阳</option>
            <option value="济南">济南</option>
            <option value="广州">广州</option>
            <option value="福州">福州</option>
            <option value="长沙">长沙</option>
            <option value="长春">长春</option>
            <option value="哈尔滨">哈尔滨</option>
            <option value="合肥">合肥</option>
            <option value="南昌">南昌</option>
            <option value="南宁">南宁</option>
            <option value="银川">银川</option>
            <option value="昆明">昆明</option>
            <option value="太原">太原</option>    
            <option value="兰州">兰州</option>
            <option value="西宁">西宁</option>
            <option value="贵阳">贵阳</option>
            <option value="乌鲁木齐">乌鲁木齐</option>
            <option value="呼和浩特">呼和浩特</option>
          </select>
          
          <p id="char3" class="p_chart3"></p>
        </div>
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_5.png" />烟花爆竹的SO2分析
          </div>
          <select  class="city" style="z-index: 1999;width: 60px;">
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="石家庄">石家庄</option>
            <option value="三亚">三亚</option>
            <option value="重庆">重庆</option>
            <option value="成都">成都</option>
            <option value="上海">上海</option>
            <option value="武汉">武汉</option>
            <option value="郑州">郑州</option>
            <option value="南京">南京</option>
            <option value="杭州">杭州</option>
            <option value="沈阳">沈阳</option>
          </select>
          <p id="char4" class="p_chart2"></p>
        </div>
        <div class="div_any_child">
          <div class="div_any_title">
            <img src="img/title_5.png" />烟花爆竹的pm10分析
          </div>
          <select  class="city" style="z-index: 1999;width: 60px;">
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="石家庄">石家庄</option>
            <option value="三亚">三亚</option>
            <option value="重庆">重庆</option>
            <option value="成都">成都</option>
            <option value="上海">上海</option>
            <option value="武汉">武汉</option>
            <option value="郑州">郑州</option>
            <option value="南京">南京</option>
            <option value="杭州">杭州</option>
            <option value="沈阳">沈阳</option>
          </select>
          <p id="char5" class="p_chart2"></p>
        </div>
      </div>
    </div>



    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script src="/js/echarts.min.js"></script>
    <script src="js/base.js"></script>
    <script src="js/index.js"></script>
    <script type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
    <script src="js/map_all.js"></script>

</body>

</html>